<template>
  <div>
    <q-toolbar class="tabs">
      <q-tabs
        v-model="selTab"
        inline-label
        shrink
        stretch
      >
        <q-tab v-for="tab in tabList" :key="tab.name" v-bind="tab" :ripple="false" class="none-hover" :class="{'has-radio': showRadio}">
          <span class="q-tab__label" v-if="showNum">（{{tab.num}}个）</span>
          <q-radio dense :value="selVal" :val="tab.name" @input="changeTab" v-if="showRadio" />
          <q-btn
            flat
            dense
            size="6px"
            :ripple="false"
            @click.stop="$emit('deleteTab', tab)"
            class="iconfont icontubiao-67 tab-close"
            v-if="showDelBtn"
          >
            <q-tooltip>删除</q-tooltip>
          </q-btn>
        </q-tab>
        <q-btn
          v-show="showAddBtn && (!maxLength || tabList.length < maxLength)"
          flat
          dense
          :ripple="false"
          @click="$emit('addTab')"
          color="primary"
          :disable="disableAddBtn"
          style="min-height: auto;min-width: auto;height: 2em;margin-top: -3px;padding-left: 10px"
          class="iconfont icontubiao-39 font-16 none-hover r-btn"
        >
          <q-tooltip>创建</q-tooltip>
        </q-btn>
      </q-tabs>
    </q-toolbar>
    <div class="scroll scrollbar">
      <slot/>
    </div>
  </div>
</template>

<script>
export default {
  name: 'index',
  props: {
    value: {
      default: null
    },
    tabList: {
      default: []
    },
    maxLength: {
      type: Number,
      default: 0
    },
    showDelBtn: {
      type: Boolean,
      default: true
    },
    showAddBtn: {
      type: Boolean,
      default: true
    },
    showRadio: {
      type: Boolean,
      default: false
    },
    showNum: {
      type: Boolean,
      default: false
    },
    selVal: {
      default: null
    },
    disableAddBtn: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      selTab: null
    }
  },
  watch: {
    value: {
      handler (val) {
        this.selTab = val
      },
      deep: true,
      immediate: true
    },
    selTab: {
      deep: true,
      handler () {
        this.$emit('input', this.selTab)
      }
    }
  },
  methods: {
    changeTab (val) {
      this.$emit('changeMarkerTab', val)
    }
  }
}
</script>

<style scoped lang="stylus">
  >>>.q-tab__label{
    text-transform: none!important
  }
  .tab-close{
    display inline-block
    width 18px
    height 18px
    min-width 18px
    min-height 18px
    margin-left 8px
    color #999
    transition all ease-in .2s
    &:hover{
      color #fff
      background-color rgba(0,0,0,.2)
    }
  }
  .tabs {
    background-color #DFE4FF
    height 40px
    min-height 40px
    font-size 16px
    padding 0
    >>>.q-tabs{
      padding-right 40px
    }
    >>>.q-tab{
      min-height 40px
      padding 0 10px
      margin 0
      transition none !important
      &:before,&:after{
        content ''
        display inline-block
        width 6px
        height 6px
        position absolute
        bottom 0
        left 0
      }
    }
    >>>.no-pointer-events{
      pointer-events auto !important
      &:after{
        content ''
        display inline-block
        width 1px
        height 24px
        background-color #D3D3D3
        position absolute
        top 8px
        left -10px
      }
    }
    >>>.q-tab__indicator{
      opacity 0
    }
    >>>.q-tab--active{
      background-color #ffffff
      border-radius 6px 6px 0 0
      padding 0 10px
      position relative
      margin 0
      .no-pointer-events{
        &:after{
          width 0
        }
      }
      &:before,&:after{
        content ''
        display inline-block
        width 6px
        height 6px
        position absolute
        bottom 0
        left -6px
      }
      &:before{
        background-color #fff
      }
      &:after{
        background-color #DFE4FF
        border-radius  0px 0px 6px 0px
      }
      & + .q-tab{
        .no-pointer-events{
          &:after{
            width 0
          }
        }
        &:before{
          background-color #fff
        }
        &:after{
          background-color #DFE4FF
          border-radius  0px 0px 0px 6px
        }
      }
      & + button{
        .q-btn__content{
          &:before,&:after{
            content ''
            display inline-block
            width 6px
            height 6px
            position absolute
            bottom -5px
            left 0
          }
          &:before{
            background-color #fff
          }
          &:after{
            background-color #DFE4FF
            //border-radius  0px 0px 0px 6px
          }
        }
      }
    }
    .r-btn{
      position absolute
      right 10px
    }
    .has-radio{
      >>>.q-tab__label{
        padding-left 28px
      }
      >>>.q-radio{
        position absolute
        left 0
      }
    }
    .none-hover{
      >>>.q-focus-helper{
        background-color #ffffff !important
        opacity 0 !important
        transition none !important
      }
      &:first-child{
        >>>.no-pointer-events{
          &:after{
            width 0
          }
        }
      }
    }
  }
</style>
